#app{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #fef9f2;
}

.main,.result{
  width: 400px;
  background-color: #fff;
  box-shadow: 0 0 10px rgb(0 0  0 / 30%);
  padding: 30px 40px;
  border-radius: 5px;
}
.result{
  text-align: center;
  color: #333;
}
.result_title{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.result i{
  color: #ff0000;
  font-size: 40px;
}
.thank_text{
  font-weight: 700;
  margin-top: 10px;
}
.result_an{
  font-weight: 700;
  margin-top: 20px;
}

.ps{
  margin-top: 20px;
  color: #555;
  font-size: 14px;
}

.main.hide{
  animation: hide 2s ease;
}

@keyframes hide{
  0%{}
  100%{
    transform: translate(400%,-300%);
  }
}

.main_hd{
  text-align: center;
  font-weight: 700;
  color: #333;
}

.main_by{
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}

.eln{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #555;
  padding: 20px;
  cursor: pointer;
}

.eln:hover,.eln.active{
  color: #333;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.eln .eln_emoji{
  width: 40px;
  margin-bottom: 10px;
}

.main_ft{
  width: 150px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  margin: 0 auto;
  background-color: #302d2b;
  cursor: pointer;
  margin-top: 30px;
}
.main_ft:active{
  transform: scale(.98);
}
